<template>
  <div class="home">
    <HomeNav></HomeNav>
    <div ref="refList" class="content-list">
      <div class="bg">
        <!-- 重大事件 -->
        <EventSwiper :list="eventList"></EventSwiper>

        
        <!-- 重点工作 -->
        <KeyWork></KeyWork>

        <h3 class="sub-title" @click="goPath('/KeyIndicator')">重点指标</h3>
        <div @click="goPath('/anomalyIndex')" v-if="anomalyNum>0" class="home-jujing">预警指标{{anomalyNum}}个，请关注</div>
        <IndicatorSwiper></IndicatorSwiper>
        <MyFav v-if="favHomeList&&favHomeList.length>0"></MyFav>

        <!-- 今日日程 -->
        <TodaySchedule @click.native="handleScheduleClick"></TodaySchedule>
        
        <NavSwiper :list="navList"></NavSwiper>

        <!-- 领导看数暂时去掉 -->
        <!-- <div class="img-banner" @click="openPath('http://10.16.3.71:10099/')">
          <img src="@/assets/home/leader-banner.png" alt="">
        </div> -->

        <h3 class="sub-title" style="margin-bottom:0">智能推荐</h3>

        <van-tabs animated class="sub-tab" swipeable>
          <van-tab title="推荐指标">
            <IndexList></IndexList>
          </van-tab>
          <van-tab title="推荐专题">
            <TopicList></TopicList>
          </van-tab>
        </van-tabs>
        
      </div>
    </div>
    <Tabbar :show-back-top="showBackTop" @handleClickItem="handleTabClick" />
    <VersionInfo
      :visible="updateVisible"
      :version-info="versionInfo"
      :force="force"
      @close="updateVisible = false"
    />
  </div>
</template>

<script lang="ts" setup>
import { config } from '@/config'
import { useScroll, useElementSize } from '@vueuse/core'
import { computed, ref, reactive, toRefs, watch, onActivated, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
import Tabbar from '@/components/Tabbar'
import VersionInfo from '@/views/my/components/VersionInfo.vue'
import HomeNav from "@/views/home/components/HomeNav.vue"
import NavSwiper from "@/views/home/components/NavSwiper.vue"
import EventSwiper from "@/views/home/components/EventSwiper.vue"
import TodaySchedule from "@/views/home/components/TodaySchedule.vue"
import IndicatorSwiper from "@/views/home/components/IndicatorSwiper.vue"
import IndexList from "@/views/home/components/IndexList.vue"
import TopicList from "@/views/home/components/TopicList.vue"
import MyFav from "@/views/home/components/MyFav.vue"
import KeyWork from "@/views/home/components/KeyWork.vue"
import { storeToRefs } from 'pinia'
import type { ITabBarItem } from '@/components/Tabbar/src/type'

import HomeServe from '@/api/home'
import MyService from '@/api/my'
import { useRouter } from "vue-router"
import { useQuotaStore } from '@/store'
import anomalyServe from '@/api/anomalyIndex'

defineOptions({
  name: 'Home'
})
// state
interface IState {
  curDivision: IDNavItem | null
}

const state = reactive<IState>({
  curDivision: null,
})

// 检查更新
const updateVisible = ref<boolean>(false)
const versionInfo = ref({})
const force = ref(true)
const checkUpdate = () => {
  MyService.isForce().then(res => {
    force.value = res.force == 'true' ? true : false
    if (compareVersions(res.version, config.version) === 1) {
      versionInfo.value = res
      updateVisible.value = true
    }
    // MyService.getVersionInfo().then(res => {
    //   if (compareVersions(res.version, config.version) === 1) {
    //     versionInfo.value = res
    //     updateVisible.value = true
    //   }
    // })
  })
}

/**
 * 版本号比较
 * @param v1 新版本
 * @param v2 旧版本
 * @returns v1新则返回1，v2新则返回-1，相等则返回0
 */
const compareVersions = (v1: string, v2: string) => {
  const v1parts = v1.split('.')
  const v2parts = v2.split('.')
  for (let i = 0; i < v1parts.length; i++) {
    if (v2parts.length === i) {
      return 1
    }
    if (v1parts[i] === v2parts[i]) {
      continue
    } else if (v1parts[i] > v2parts[i]) {
      return 1
    } else {
      return -1
    }
  }
  if (v1parts.length !== v2parts.length) {
    return -1
  }
  return 0
}

// checkUpdate()

const refList = ref<HTMLElement | null>(null)
const { y: scrollY } = useScroll(refList, {
  behavior: 'smooth'
})
const { height: listHeight } = useElementSize(refList)
const showBackTop = computed(() => {
  return scrollY.value > listHeight.value
})
const handleTabClick = (data: ITabBarItem) => {
  if (data.to == '/home' && showBackTop.value) {
    scrollY.value = 0
  }
}
// 菜单
const navList = ref<IDNavItem[]>([])
const initNavListList = () => {
  HomeServe.getMainPageist().then(resp => {
    const targetIdx = resp.data.findIndex((d: IDNavItem) => {
      return d.menuType == '行业云图'
    })
    if (targetIdx > -1) {
      const target = resp.data[targetIdx].cloudMapDTOs
      navList.value = target
    }
  })
}
initNavListList()
//获取重大事件
const eventList = ref([]);
const getImportantEvent = () => {
  HomeServe.getEventsPoints({type:'day'}).then(res => {
    eventList.value = res.data;
  })
}
getImportantEvent()

//我的收藏
const quotaStore = useQuotaStore()
const { favHomeList } = storeToRefs(quotaStore)
quotaStore.fetchFavQuotaList().then(() => {
  quotaStore.fetchPricePrediction({isCollect: '1'})
})

//获取异常指标数量
const anomalyNum = ref(0)
const getAnomalyIndexCount = async () => {
  const res = await anomalyServe.getAnomalyIndexCount()
  if (!res.code == 0) return
  anomalyNum.value = res.data.anomalyIndex
}
getAnomalyIndexCount()

const router = useRouter()
const handleScheduleClick = () => {
  router.push({
    path: '/calendar'
  })
}
const goPath = (path: string) => {
  router.push({
    path: path
  })
}
const openPath = (url: string) => {
  window.open(url)
}
</script>

<script lang="ts">
export interface IDNavItem {
  menuType: string
}

</script>

<style lang="less" scoped>
@import url('./index');
</style>
